<template>
    <!-- 我的地址 -->
    <view class="purchaseDetailContainer">
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'精选套餐'">
        </cunstom_navigation_bar>
        <view class="contentBox">
          <view class="topBg">
            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/topBg.png" mode="aspectFill"></image>
          </view> 
		</view>
		<view class="typesLine">
			<view v-for="(item,index) in typeLines" :class="selectedTypeIndex === index?'eachType red':'eachType' "
			  @tap="changeType(index)">
			  {{item.name}}
			  <image v-if="selectedTypeIndex === index" src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/upArrow.png">
			  </image>
			  <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/downArrow.png"></image>
			</view>
		</view>
		<view class="uni-list" >
		  <radio-group @change="radioChange">
		    <label class="uni-list-cell uni-list-cell-pd" v-for="(itemV,indexV) in typeLines[selectedTypeIndex].values"
		      :key="itemV.value">
		      <view>
		        <radio :value="itemV.value" color="#D93F11" :checked="index === item.current" />
		      </view>
		      <view>{{itemV.name}}</view>
		    </label>
		  </radio-group>
		</view>
		
		<view class="mealList" v-for="(item,index) in packageList" @tap="jumpTo('/page_mealList/mealDetail?id='+item.id)">
			<view class="mealHead">
				<image :src="imgDomain + item.image" mode="aspectFill"></image>
				<view class="cookLine">
					<view class="info">
						<view class="cookInfo">
							<view class="item">
								<image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/topBg.png" ></image>
							</view>
							<view class="item">徐丽</view>
							<view class="item">16厨龄</view>
						</view>	
					</view>
					<view class="info">
						<view class="txt">共21道菜</view>
					</view>
				</view>
				
				<view class="fenshu">
					<view class="txt"> 4.9 分</view>
				</view>
			</view>
			<view class="mealContext">
				<view class="line1">
					<view class="item1">2388套餐/10位</view>
					<view class="item2">8-10位</view>
					<view class="item3">距离12.3km</view>
				</view>
				<view class="line2">
					星泰度东南亚风情餐厅是马苏明餐饮管理有限公司旗下的一家以东南亚风情为主打风格的餐厅,泰皇冬阴功汤...
				</view>	
				<view class="line3">
					<view class="item1">0人已购</view>
					<view class="item2">￥2388起</view>
				</view>	
			</view>
		</view>
    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return { 
                addrListData: 3, 
                mallProductId: '',
                selectedOption: {},
                openId: "", 
                imgDomain: "", 
                propStyles: {
                    // iconSrc: "../https://visionmpapi.jiuerjindi.com/upload/mp/ucenter/backIcon.png",
                    iconSrc: "black",
                    // bgColor: '#FECF01', 
                },
				packageList:[],
				params:{
					page: 1,
					limit: 20,
					city: '苏州',
					longitude: 120.598346,
					latitude: 31.287181
				},
				selectedTypeIndex: -1, 
				typeLines: [
				  {
					name: '综合排序',
					selected: false,
					current: 0,
					values: [
					  {
						value: '0',
						name: '综合排序',
						checked: 'true'
					  },
					  {
						value: '1',
						name: '好评优先',
						checked: 'false'
					  },
					  {
						value: '2',
						name: '低价优先',
						checked: 'false'
					  },
					  {
						value: '3',
						name: '高价优先',
						checked: 'false'
					  },
					  {
						value: '4',
						name: '距离最近',
						checked: 'false'
					  }
					]
				  },
				  {
					name: '用餐人数',
					selected: false,
					values: [
					  {
					  	value: '0',
					  	name: '全部',
					  	checked: 'true'
					  },
					  {
					  	value: '1',
					  	name: '2-4人',
					  	checked: 'false'
					  },
					  {
					  	value: '2',
					  	name: '4-6人',
					  	checked: 'false'
					  },
					  {
					  	value: '3',
					  	name: '7-10人',
					  	checked: 'false'
					  },
					  {
					  	value: '4',
					  	name: '11-15人',
					  	checked: 'false'
					  }
					]
				  },
				  {
					name: '价格优先',
					selected: false,
					values: [
					  {
					  	value: '0',
					  	name: '全部',
					  	checked: 'true'
					  },
					  {
					  	value: '1',
					  	name: '高',
					  	checked: 'false'
					  }
					]
				  }
				],
            };
        },
        computed: {

        },
        methods: {
		  changeType(index) {
			console.log('111', this.selectedTypeIndex);
			console.log('222', index);
			if (this.selectedTypeIndex != index) {
			  this.selectedTypeIndex = index
			} else {
			  this.selectedTypeIndex = 999
			}
		  },
            jumpTo(url) {
                uni.navigateTo({
                    url: url,
                })
            },
			selectAddress(id){
				uni.setStorageSync('addressSelect', id); // 存到缓存中
				uni.navigateBack ({
                    url: `/page_bookDetail/bookDetail`,
                })
			},
            goback() {
                console.log("回去");
                uni.navigateBack();
            },
			// 套餐列表
			getPackageList(){ 
				util.request(api.packageList, this.params
				  , 'GET', 'application/json').then(res => {
				    if (res.code == 200) {
				      this.packageList = res.data.data;
				    }
				  }).catch((err) => {
				    console.log('err', err)
				
				  }); 
			}

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },



        onLoad: function (option) {

            //option为object类型，会序列化上个页面传递的参数
            // console.log('onload~~~购买页面', option);
            // this.mallProductId = option.mallProductId;
            // this.skuId = option.skuId
            // this.quantity = Number(option.quantity)
            // this.getOrderAddress(option.id)
            // this.startDate = this.getDate()

            this.imgDomain = process.env.VUE_APP_BASE_URL;
			this.getPackageList();
        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }
 
  .contentBox {
    margin-top: 28rpx;
	display: flex;
	flex-direction: column;
    align-items: center;
    width: 100%;
    .topBg {
      width: 694rpx;
      height: 294rpx;
      image {
        width: 100%;
		height: 294rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
    }
  }
  .typesLine {
    width: 100%;
    display: flex;
    margin: 32rpx 0rpx;
    justify-content: space-around;
	font-family: OPPOSans, OPPOSans;
	font-weight: 500;
	font-size: 32rpx;
	color: #D93F11;
	line-height: 50rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
  
    .eachType {
      image {
        width: 26rpx;
        height: 26rpx;
        margin-left: 10rpx;
      }
  
    }
  
    .red {
      color: #D93F11;
    }
  
    .valueBox {
      width: 100%;
      background: #FFF;
      border-radius: 0rpx 0rpx 30rpx 30rpx;
    }
  }
  .uni-list {
    position: absolute;
    z-index: 999 !important;
    background: #ffffff;
    width: 750rpx;
  
    /deep/ .uni-list-cell-pd {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      padding: 0rpx 30rpx;
      height: 100rpx;
      align-items: center;
    }
  
    .typeBox {
      padding: 0rpx 30rpx;
      height: 58rpx;
      line-height: 58rpx;
      background: rgba(43, 48, 59, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      margin-right: 30rpx;
      margin-bottom: 26rpx;
    }
  
    .red {
      background: rgba(217, 63, 17, 0.1);
      color: #D93F11;
    }
  }
  
  .mealList {
	  padding: 0rpx 30rpx;
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  
	  .mealHead{
		  width: 100%;
		  height: 404rpx;
		  background: rgba(0,0,0,0.2);
		  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.15);
		  border-radius: 16rpx 16rpx 0rpx 0rpx;
		  position: relative; /* 设置为相对定位，以便内部的绝对定位元素能够相对于它定位 */
		  image {
			  width: 100%;
			  height: 404rpx;
			  border-radius: 16rpx 16rpx 0rpx 0rpx;
		  }
		  .cookLine{
			  position: absolute; 
			  width: 100% ;
			  height: 100rpx;
			  left: 28rpx;
			  top: 268rpx;
			  display: flex; /* 启用Flexbox布局 */
			  flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
			  justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
			  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
			  .info{
				  flex: 1; /* 子元素平均分配剩余空间（若需不等宽，可分别设置flex值） */
				  height: 100%; /* 子元素高度与容器一致 */
				  display: flex; /* 启用Flexbox布局 */
				  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				  .cookInfo{
				  	width: 274rpx;
				  	height: 100rpx;
				  	border-radius: 0rpx 0rpx 0rpx 0rpx;
				  	display: flex; /* 启用Flexbox布局 */
				  	flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				  	justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
				  	align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				  	.item{
				  		flex: 1; /* 子元素平均分配剩余空间（若需不等宽，可分别设置flex值） */
				  		height: 100%; /* 子元素高度与容器一致 */
				  		text-align: center; /* 文字居中显示 */
				  		line-height: 100rpx; /* 行高与容器高度一致，实现垂直居中 */
				  		box-sizing: border-box; /* 包含内边距和边框在内计算元素宽度 */
				  		margin: 0rpx; /* 子元素间的水平间距（首尾元素除外，因使用了space-between） */
				  		font-family: OPPOSans, OPPOSans;
				  		font-weight: 500;
				  		font-size: 24rpx;
				  		color: #FFFFFF;
				  		line-height: 50rpx;
				  		font-style: normal;
				  		text-transform: none;
				  		 /* 文字垂直居中的关键 */
				  		display: flex; /* 将.item也设为Flex容器 */
				  		align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
				  		justify-content: center; /* 如果需要，也可以使文字在水平方向上居中对齐 */
				  				  
				  		image{
				  			width: 100rpx;
				  			height: 100rpx;
				  			border-radius: 45rpx 45rpx;
				  		}
				  	}
				  }
				  .txt{
					 width: 118rpx;
					 height: 50rpx;
					 font-size: 24rpx;
					 color: #FFFFFF;
					 margin-left: auto;
					 margin-right: 50rpx;
					 font-family: OPPOSans, OPPOSans;
					 display: flex;
					 align-items: center;
					 justify-content: center; 
					 background: rgba(0,0,0,0.5);
					 border-radius: 16rpx 16rpx 16rpx 16rpx;
				  } 
			  }
		  }
		  .fenshu {
			  position: absolute; 
			  width: 142rpx;
			  height: 54rpx;
			  right: 0; /* 靠右对齐 */
			  top: 48rpx;
			  border-radius: 45rpx 0rpx 0rpx 45rpx;
			  background: linear-gradient( 90deg, rgba(254,207,1,0.8) 0%, rgba(217,63,17,0.8) 100%);
			  .txt{
				  height: 100%; /* 子元素高度与容器一致 */
				  font-size: 32rpx;
				  color: #FFFFFF;
				  font-family: OPPOSans, OPPOSans;
				  display: flex;
				  align-items: center;
				  justify-content: center;
			  }
		  }
	  }
	  .mealContext{
		  width: 100%;
		  height: 278rpx;
		  background: #FFFFFF;
		  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.15);
		  border-radius: 0rpx 0rpx 16rpx 16rpx;
		  margin-bottom: 28rpx;
		  .line1{
			  width: 100%;
			  height: 50rpx;
			  margin-left: 25rpx;
			  margin-right: 25rpx;
			  margin-top: 28rpx;
			  display: flex; /* 启用Flexbox布局 */
			  flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
			  display: flex; /* 启用Flexbox布局 */
			  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
			  .item1{
				  width: 252rpx;
				  height: 50rpx;
				  font-family: OPPOSans, OPPOSans;
				  font-weight: 500;
				  font-size: 36rpx;
				  color: #333333;
				  line-height: 50rpx;
				  text-align: left;
				  font-style: normal;
				  text-transform: none;
			  }
			  .item2{
				  width: 96rpx;
				  height: 32rpx;
				  margin-left: 50rpx;
				  background: #F9F5E6;
				  border-radius: 8rpx 8rpx 8rpx 8rpx;
				  font-family: OPPOSans, OPPOSans;
				  font-weight: 400;
				  font-size: 24rpx;
				  color: #D93F11;
				  line-height: 24rpx;
				  text-align: left;
				  font-style: normal;
				  text-transform: none;
				  display: flex; /* 将.item也设为Flex容器 */
				  align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
				  justify-content: center; /* 如果需要，也可以使文字在水平方向上居中对齐 */
			  }
			  .item3{
				  margin-left: auto;
				  margin-right: 50rpx;
				  height: 24rpx;
				  font-family: OPPOSans, OPPOSans;
				  font-weight: 500;
				  font-size: 24rpx;
				  color: rgba(51,51,51,0.6);
				  line-height: 24rpx;
				  text-align: left;
				  font-style: normal;
				  text-transform: none;
			  }
		  }
		  .line2{
			  width: 100%;
			  height: 80rpx;
			  padding-left: 25rpx;
			  padding-right: 25rpx;
			  margin-top: 28rpx;
			  font-family: OPPOSans, OPPOSans;
			  font-weight: 400;
			  font-size: 28rpx;
			  color: rgba(51,51,51,0.6);
			  line-height: 40rpx;
			  text-align: left;
			  font-style: normal;
			  text-transform: none;
		  }
		  .line3{
			  width: 100%;
			  height: 50rpx;
			  padding-left: 25rpx;
			  padding-right: 25rpx;
			  margin-top: 28rpx;
			  display: flex; /* 启用Flexbox布局 */
			  flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
			  display: flex; /* 启用Flexbox布局 */
			  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
			  .item1{
				  width: 88rpx;
				  height: 50rpx;
				  font-family: OPPOSans, OPPOSans;
				  font-weight: 500;
				  font-size: 24rpx;
				  color: rgba(51,51,51,0.5);
				  line-height: 50rpx;
				  text-align: left;
				  font-style: normal;
				  text-transform: none;
			  }
			  .item2{
				  margin-left: auto;
				  margin-right: 0rpx;
				  width: 144rpx;
				  height: 50rpx;
				  font-family: OPPOSans, OPPOSans;
				  font-weight: 500;
				  font-size: 32rpx;
				  color: #D93F11;
				  line-height: 50rpx;
				  text-align: left;
				  font-style: normal;
				  text-transform: none;
				  text-align: right;
			  }
		  }
	  }
  }


    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }
</style>